<template>
	<view>
		<view class="shopHeader">
			<view>
				<image src="https://d-youpin.bigchun.com/assets/image/shopBanner2.png" class="shopBanner"></image>
			</view>
			<view class="title">
				<image class="decorate" src="../../static/images/decorate2.png"></image>
				<view class="title-text">编辑店铺信息</view>
				<image class="decorate" src="../../static/images/decorate.png"></image>
			</view>
		</view>


		<view class="form">
			<u--form labelPosition="left" :model="shop" ref="form" labelWidth="80">
				<u-form-item label="门店名称" borderBottom ref="item1">
					<u--input v-model="shop.shop_name" border="none" placeholder="请输入店铺名称"
						placeholderClass="placeholderClass"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" borderBottom ref="item1">
					<u--input v-model="shop.phone" border="none" placeholder="请输入手机号码"
						placeholderClass="placeholderClass"></u--input>
				</u-form-item>
				<u-form-item label="地址" borderBottom ref="item1">
					<u--input v-model="shop.shop_address" border="none" placeholder="请输入店铺地址"
						placeholderClass="placeholderClass"></u--input>
				</u-form-item>
				<u-form-item label="营业时间" borderBottom ref="item1">
					<view @click="open()">
						<u--input v-model="businessHours" border="none" readonly @focus="open()" placeholder="请输入营业时间"
							placeholderClass="placeholderClass"></u--input>
					</view>

				</u-form-item>
				<u-form-item label="个性标签" borderBottom ref="item1">
					<block v-for="key in label_idsList">
						<view class="label">{{key}}</view>
					</block>
					<view class="addLabel" @click="openAddLable()">+添加自定义标签</view>
				</u-form-item>
				<u-form-item label="添加门店照片" labelWidth="220" ref="item1">
				</u-form-item>
				<view class="flex align-center">
					<view class="uploadImg"
						style="background-color: transparent;border: 1px solid #CCCCCC;margin-right: 20rpx;"
						v-for="key in shop_imagesList">
						<image :src="key"></image>
					</view>
					<view class="uploadImg" @click="upFileImg">
						<image src="../../static/images/jiahao.png" style="width: 61rpx;height: 60rpx;"></image>
						<view style="font-size: 24rpx;font-weight: 400;color: #FFFFFF;line-height: 40rpx;">点击上传</view>
					</view>
				</view>
			</u--form>
			<view class="flex align-center justify-center">
				<view class="tijiao" @click="submit">提交</view>
			</view>
		</view>

		<u-popup :show="show" @close="close">
			<view>
				<smh-time-range :time="['08','01','0','23','01']" @confrim="confrim" @cancel="cancel"></smh-time-range>
			</view>
		</u-popup>

		<u-popup :show="showAddLable" mode="center" @close="closeAddLable">
			<view style="margin: 100rpx;">
				<u--input placeholder="请输入新的标签" border="surround" v-model="addLableValue" @confirm="addLable">
				</u--input>

			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		postNewsDetail,
		shopcategory,
		shoplist,
		addlabel,
		editshop,
		shopdetails
	} from "../../api/home.js";
	import {
		url,
		upFile
	} from "../../utils/url.js";
	import util from "../../utils/util.js"

	export default {
		data() {
			return {
				addLableValue: "",
				businessHours: "",
				shop: {
					shop_name: "",
					phone: "",
					shop_address: "",
					business_times: "",
					endtime: "",
					shop_images: "",
					label_ids: "",
				},
				rules: {
					shop_name: {
						required: true,
						message: '请输入店铺名称',
						trigger: ['blur', 'change']
					},
					phone: {
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change']
					},
					address: {
						required: true,
						message: '请输入店铺地址',
						trigger: ['blur', 'change']
					},
					business_times: {
						required: true,
						message: '请输入店铺营业时间',
						trigger: ['blur', 'change']
					}
				},
				show: false,
				showAddLable: false,
				text: 20,
				current: 0,
				activeStyle: {
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#808080',
					transform: 'scale(1)'
				},
				q: "",
				cate_id: "",
				lng: "",
				lat: "",
				newDetail: {}, // 咨询详情
				list4: [],
				shoplist: [],
				value: "",
				type: true,
				shop_images: "",
				shop_imagesList: [],
				label_idsList: []
			}
		},
		onLoad(e) {
			console.log(e.shopId);
			this.shopId = e.shopId;
			this.init()
		},
		methods: {
			async init() {
				var data = {
					shop_id: this.shopId
				}
				var res = await shopdetails(data);
				if (res.data.code == 1) {
					let shopDetail = res.data.data;
					this.shop = shopDetail;
					let shop_imagesList = shopDetail.shop_images
					let label_idsList = shopDetail.label
					if (label_idsList != null && label_idsList != "") {
						this.label_idsList = label_idsList.split(",")
					}
					if (shop_imagesList != null && shop_imagesList != "") {
						this.shop_imagesList = shop_imagesList.split(",")
					}
					this.businessHours = shopDetail.business_times + "-" + shopDetail.endtime
					console.log(this.shop);
				}
			},
			submit() {
				var data = this.shop;
				data.token = wx.getStorageSync("token")
				data.shop_id = this.shopId
				console.log(data);
				editshop(data).then(res => {
					console.log("editshop", res);
					if (res.data.code == 1) {
						uni.showToast({
							title: "修改成功",
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 2000);
					
					}
				})
			},
			confrim(e) {
				console.log(e.time) //确定事件 =>12:30-17:30
				if (e.time != null && e.time != "") {
					this.shop.business_times == e.time.split("-")[0]
					this.shop.endtime = e.time.split("-")[1]
					this.businessHours = this.shop.business_times + "-" + this.shop.endtime
					this.show = false
				} else {
					this.show = false
				}

			},
			cancel(e) {
				// console.log(e.time)//取消事件 =>12:30-17:30
				this.show = false
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			openAddLable() {
				this.showAddLable = true
			},
			closeAddLable() {
				this.showAddLable = false
			},
			addLable(value) {
				var data = {
					token: wx.getStorageSync("token"),
					label: value
				}
				addlabel(data).then(res => {
					console.log("addlabel", res);
					//alert(JSON.stringify(res));
					this.label_idsList.push(res.data.data.label);
					this.shop.label_ids = res.data.data.label_ids + "," + this.shop.label_ids;
					console.log(this.shop.label_ids);
					this.showAddLable = false
					this.addLableValue = ""
				})
			},

			// 上传图片
			upFileImg() {

				console.log("newDetail");
				const self = this
				if (!self.type) return
				util.uploadImageOne({}, value => {
					console.log(value);
					this.shop_imagesList.push(value.data.fullurl);
					this.shop.shop_images = value.data.fullurl + "," + this.shop.shop_images;
					console.log(this.shop.shop_images);
				});
			},
		}
	}
</script>

<style>
	.uploadImg {
		width: 118rpx;
		height: 118rpx;
		background: #ECECEC;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.addLabel {
		width: 218rpx;
		height: 42rpx;
		border: 2rpx solid #466AFF;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #466AFF;
		line-height: 42rpx;
		text-align: center;
	}

	.label {
		padding: 0 10px;
		height: 42rpx;
		border: 2rpx solid #CCCCCC;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #CCCCCC;
		text-align: center;
		margin-right: 20rpx;
	}

	.placeholderClass {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #CCCCCC;
		line-height: 80rpx;
	}

	.form {
		width: 750rpx;
		height: 760rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: -50rpx;
		position: fixed;
		padding: 40rpx;
	}

	.decorate {
		width: 123rpx;
		height: 29rpx;
	}

	.title-text {
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 69rpx;
		margin: 0 70rpx;
	}

	.title {
		background: rgba(0, 0, 0, 0.3);
		width: 750rpx;
		height: 290rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.shopHeader {
		display: flex;
		width: 750rpx;
		height: 290rpx;
	}

	.shopBanner {
		width: 750rpx;
		height: 290rpx;
		display: flex;
	}

	.tijiao {
		width: 568rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 69rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 240rpx;

	}
</style>
